<template>
  <div class="shopping">
    <div class="shop-nav clearfix"><span class="tt">购物车</span> <span class="edit" v-on:click="editFn">编辑</span></div>
    <div class="have-shop" v-if="haveshop">
      <div class="list-box">

        <div class="li clearfix" v-for="(item,index) in products" v-if="item.stock !=0">
          <div class="fl-div">
            <span class="ico-check check-pub" v-on:click="checkFn(index)"></span>
          </div>
          <div class="fc-div clearfix">
            <a v-on:click="redirect('/shop/details/'+item.produt_id)">
              <div class="left img">
                <img :src="item.thumb" alt="">
              </div>
              <div class="left font">
                <div class="a-tt">{{item.name}}</div>
                <div class="a-pr">{{item.price}}</div>
              </div>
            </a>
          </div>
          <div class="fr-div">
            x1
          </div>
        </div>


        <!---->
        <!--<div class="li clearfix">-->
          <!--<div class="fl-div">-->
            <!--<span class="ico-checked"></span>-->
          <!--</div>-->
          <!--<div class="fc-div clearfix">-->
            <!--<a href="#">-->
              <!--<div class="left img">-->
                <!--<img src="https://dummyimage.com/80x100" alt="">-->
              <!--</div>-->
              <!--<div class="left font">-->
                <!--<div class="a-tt">【全新】gucci 鳄鱼皮手拿包</div>-->
                <!--<div class="a-pr">¥3999</div>-->
              <!--</div>-->
            <!--</a>-->
          <!--</div>-->
          <!--<div class="fr-div">-->
            <!--x1-->
          <!--</div>-->
        <!--</div>-->


        <!--<div class="li clearfix shixiao">-->
          <!--<div class="fl-div">-->
            <!--<span class="overdue">失效</span>-->
          <!--</div>-->
          <!--<div class="fc-div clearfix">-->
            <!--<a href="#">-->
              <!--<div class="left img">-->
                <!--<img src="https://dummyimage.com/80x100" alt="">-->
              <!--</div>-->
              <!--<div class="left font">-->
                <!--<div class="a-tt">【全新】gucci 鳄鱼皮手拿包</div>-->
                <!--<div class="a-pr">¥3999</div>-->
              <!--</div>-->
            <!--</a>-->
          <!--</div>-->
          <!--<div class="fr-div">-->
            <!--x1-->
          <!--</div>-->
        <!--</div>-->
      </div>
      <!--<div class="clear-box">-->
        <!--<span class="clear">清空失效宝贝</span>-->
      <!--</div>-->
      <!--<div class="goddess-rec">-->
        <!--<div class="tt"><span>为您推荐</span></div>-->
        <!--<div class="rec-box">-->
          <!--<ul class="rec-list clearfix">-->
            <!--<li class="rec-li">-->
              <!--<div class="img"><a href="#"><img src="https://dummyimage.com/335x400" alt=""></a></div>-->
              <!--<div class="rec-t"><a href="#">【全新】gucci 鳄鱼皮墨绿色手拿包</a></div>-->
              <!--<div class="price-b clearfix">-->
                <!--<div class="fl"><span class="price">¥3999</span></div>-->
                <!--<div class="fr">-->
                  <!--<span class="shoucang"><img src="../../assets/content/icoa3.png" alt=""></span>-->
                  <!--&lt;!&ndash;<span class="shoucang active"><img src="../assets/content/icoa3-ac.png" alt=""></span>&ndash;&gt;-->
                <!--</div>-->
              <!--</div>-->
            <!--</li>-->
            <!--<li class="rec-li">-->
              <!--<div class="img"><a href="#"><img src="https://dummyimage.com/335x400" alt=""></a></div>-->
              <!--<div class="rec-t"><a href="#">【全新】gucci 鳄鱼皮墨绿色手拿包</a></div>-->
              <!--<div class="price-b clearfix">-->
                <!--<div class="fl"><span class="price">¥3999</span></div>-->
                <!--<div class="fr">-->
                  <!--&lt;!&ndash;<span class="shoucang"><img src="../assets/content/icoa3.png" alt=""></span>&ndash;&gt;-->
                  <!--<span class="shoucang active"><img src="../../assets/content/icoa3-ac.png" alt=""></span>-->
                <!--</div>-->
              <!--</div>-->
            <!--</li>-->
            <!--<li class="rec-li">-->
              <!--<div class="img"><a href="#"><img src="https://dummyimage.com/335x400" alt=""></a></div>-->
              <!--<div class="rec-t"><a href="#">【全新】gucci 鳄鱼皮墨绿色手拿包</a></div>-->
              <!--<div class="price-b clearfix">-->
                <!--<div class="fl"><span class="price">¥3999</span></div>-->
                <!--<div class="fr">-->
                  <!--&lt;!&ndash;<span class="shoucang"><img src="../assets/content/icoa3.png" alt=""></span>&ndash;&gt;-->
                  <!--<span class="shoucang active"><img src="../../assets/content/icoa3-ac.png" alt=""></span>-->
                <!--</div>-->
              <!--</div>-->
            <!--</li>-->
            <!--<li class="rec-li">-->
              <!--<div class="img"><a href="#"><img src="https://dummyimage.com/335x400" alt=""></a></div>-->
              <!--<div class="rec-t"><a href="#">【全新】gucci 鳄鱼皮墨绿色手拿包</a></div>-->
              <!--<div class="price-b clearfix">-->
                <!--<div class="fl"><span class="price">¥3999</span></div>-->
                <!--<div class="fr">-->
                  <!--&lt;!&ndash;<span class="shoucang"><img src="../assets/content/icoa3.png" alt=""></span>&ndash;&gt;-->
                  <!--<span class="shoucang active"><img src="../../assets/content/icoa3-ac.png" alt=""></span>-->
                <!--</div>-->
              <!--</div>-->
            <!--</li>-->
          <!--</ul>-->
        <!--</div>-->
      <!--</div>-->

      <div class="check-buy ">
        <div class="clearfix buy-box">
          <span class="ico-check" id="checkAll" v-on:click="checkAllFn"></span>
          <span>全选</span>
          <span class="total">总计：</span>
          <span class="val">{{totalPrice|format}}</span>
          <span class="buy" v-on:click="tobuy">去结算（{{checknum}}）</span>
        </div>
        <foot-guide></foot-guide>
      </div>
    </div>
    <div class="no-have-shop" v-if="!haveshop">
      <div class="no-box">
        <div>您的购物袋中还没有商品！</div>
        <div class="btn-box">
          <a href="#" class="go-btn">再去逛逛</a>
        </div>
      </div>
      <foot-guide></foot-guide>
    </div>
  </div>
</template>


<script>
  import { Toast } from 'mint-ui';
  import footGuide from '../../components/footGuide'

export default {
  name: 'Shopping',
  data () {
    return {
      haveshop:false,
      products:[],
      checknum:'',
      productId:'',
      totalPrice:0
    }
  },
  filters:{      //数据过滤器
    format:function(value){

      return value;
      //制保留2位小数，如：2，会在2后面补上00.即2.00
//      function toDecimal2(x) {
//        var f = parseFloat(x);
//        if (isNaN(f)) {
//          return false;
//        }
//        var f = Math.round(x*100)/100;
//        var s = f.toString();
//        var rs = s.indexOf('.');
//        if (rs < 0) {
//          rs = s.length;
//          s += '.';
//        }
//        while (s.length <= rs + 2) {
//          s += '0';
//        }
//        return s;
//      }
//
//      value = toDecimal2(value);
////      alert(value)
//      var pattern = /(?=((?!\b)\d{3})+$)/g;
//      return '￥'+(''+value).replace(pattern, ',');

//      var html,_val;
//      value =Number(value).toFixed(2);
//      if(value==0){
//        value=0;
//        return html = "￥0";
//      }else if(value.split('.')[1].substring(1)==0){
//        value = Number(value).toFixed(1);
//      }
//      _val = value.split('.');
//      return html = '￥'+_val[0]+'.'+_val[1]+'';
    }

  },
  mounted:function(){
      var _this = this;
      setTimeout(function(){

        var checkoutCartData = {};
        checkoutCartData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        $.ajax({
          type:'post',
          url: RouteMap.checkoutCart,
          data:checkoutCartData,
          success:function(res){
            if(res.code == 200){
              if(res.data.products.length>0){

                //mock data
//              res.data.products.push({
//                "cart_id": "2351",
//                "produt_id": "881",
//                "thumb": "http://api.piver.cn/image/cache/catalog/aa22263d7aa04cbabfe6f4f34e1cc743_s2-47x47.jpg",
//                "name": "GUCCI 古驰mini手提包",
//                "model": "mini手提包",
//                "option": [],
//                "recurring": "",
//                "quantity": 1,
//                "stock": 0,
//                "reward": "",
//                "price": "￥12,000.00",
//                "total": "￥12,000.00",
//                "href": "http://api.piver.cn/index.php?route=product/product&amp;product_id=88"
//              });




                _this.haveshop = true;
                _this.products = res.data.products;
                _this.checknum = _this.products.length;
                var tempid = [];
                var tempTotalPrice=0;
                for(var i=0;i<_this.products.length;i++){

                  //添加是否选中的状态
                  _this.products[i]['ischecked'] = true;

                  tempid.push(_this.products[i].produt_id)
                  console.log(_this.products[i].price.replace('￥',''))
                  tempTotalPrice += Number(_this.products[i].price.replace('￥','').replace(',',''))
                }
                _this.productId = tempid.join(',');
//              console.log(_this.productId)
                _this.totalPrice = tempTotalPrice;

              }
            }
            else{
              console.log(res.msg);
            }
          }
        })

      },20)

  },
  components: {
    footGuide
  },
  methods: {
    tobuy:function () {
      this.$router.push('/me/order?productId='+this.productId)
    },
    checkAllFn:function(){

      var currentObj = $('#checkAll');
      currentObj.addClass('ico-check')
      currentObj.removeClass('ico-checked')

      this.totalPrice = 0
      var tempIdArr = [];
      for(var i=0;i<$('.check-pub').length;i++){

        $('.check-pub').eq(i).addClass('ico-check');
        $('.check-pub').eq(i).removeClass('ico-checked')

        if($('.check-pub').eq(i).hasClass('ico-check')){

          this.totalPrice += Number(this.products[i].price.replace('￥','').replace(',',''));
          tempIdArr.push(this.products[i].produt_id);
        }
      }
      this.productId = tempIdArr.join(',');
      console.log(this.productId)
      this.checknum = tempIdArr.length;
    },
    checkFn:function(index){
      var currentObj = $('.check-pub').eq(index);
      if(currentObj.hasClass('ico-check')){
        currentObj.removeClass('ico-check')
        currentObj.addClass('ico-checked')

      }
      else{
        currentObj.addClass('ico-check')
        currentObj.removeClass('ico-checked')
      }

      this.totalPrice = 0
      var tempIdArr = [];
      for(var i=0;i<$('.check-pub').length;i++){

        if($('.check-pub').eq(i).hasClass('ico-check')){

          this.totalPrice += Number(this.products[i].price.replace('￥','').replace(',',''));
          tempIdArr.push(this.products[i].produt_id);
        }
      }

      this.productId = tempIdArr.join(',');
      console.log(this.productId)

      if(tempIdArr.length == this.products.length){

        $('#checkAll').addClass('ico-check')
        $('#checkAll').removeClass('ico-checked')
      }
      else{

        $('#checkAll').removeClass('ico-check')
        $('#checkAll').addClass('ico-checked')
      }

      this.checknum = tempIdArr.length;

    },
    redirect:function(url){
      this.$router.push(url);
    },
    editFn:function(){

      this.$router.push('/me/editshopping');
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .shopping{
    padding-bottom: 6rem;
  }
  .shop-nav{
    text-align: center;
    font-size: .7rem;
    position: relative;
    padding: .5rem;
    border-bottom: 1px solid #c2c2c2;
  }
  .edit {
    position: absolute;
    right: .5rem;
    font-size: .6rem;
  }
  .ico-check{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: url("../../assets/me/check.png");
    background-size: 100% 100%;
  }
  .ico-checked{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: url("../../assets/me/checked.png");
    background-size: 100% 100%;
  }

  .list-box{

  }
  .list-box .li{
    padding: .5rem;
    font-size: .6rem;
    border-bottom: 1px solid #c2c2c2;
    display:-webkit-box;
    justify-content: space-between;
    color: #707070;
  }
  .list-box .li a{
    color: #707070;
  }
  .list-box .shixiao{
    color: #c2c2c2;
  }
  .list-box .shixiao a{
    color: #c2c2c2;
  }
  .list-box .li .fl-div{
    width: 1.5rem;
  }
  .fl-div span{
    display: inline-block;
    margin-top: 1.4rem;
  }
  .list-box .li .fc-div{
    width: 11rem;
  }
  .list-box .li .fr-div{
    width: 2rem;
    text-align: right;
    padding-top: 1.5rem;

  }
  .list-box .li .left img{ width:3rem }
  .fc-div .img{
    width: 3rem;
  }
  .fc-div .font .a-pr{
    padding-top: .2rem;
  }
  .fc-div .font{
    width: 7.5rem;
    margin-left: .5rem;
    margin-top: .5rem;
    font-size: .6rem;
    line-height: .8rem;
  }
  .overdue{
    background: #f5f5f5;
    border-radius: .2rem;
    padding: .1rem .1rem;
    font-size: .5rem;
  }
  .clear-box{
    text-align: center;
    padding-top: .5rem;
  }
  .clear-box .clear{
    display: inline-block;
    background: #f5f5f5;
    color: #707070;
    padding: .2rem .8rem;
    border-radius: .4rem;
  }

  .goddess-rec{
    background: #fff;
    margin-top: .5rem;
    padding-left: .23rem;
    padding-bottom: .5rem;
    color: #707070;
  }
  .goddess-rec .tt{
    text-align: center;
    padding: .5rem 0 .2rem;
  }
  .goddess-rec .tt span{
    display: inline-block;
    background: #ff7b80;
    color: #fff;
    padding: .1rem .3rem;
  }
  .goddess-rec .rec-li{
    float: left;
    width: 7rem;
    margin-left: .5rem;
    margin-top: .5rem;

  }
  .goddess-rec .rec-li .img img{
    width: 100%;
  }
  .goddess-rec a{
    color: #707070;
  }
  .goddess-rec .rec-t{
    padding-top: .2rem;
  }
  .goddess-rec .guanzhu{

  }
  .goddess-rec .shoucang img{
    width: .7rem;
  }
  .goddess-rec .fr{
    padding-right: .2rem;
  }

  .check-buy{
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #f5f5f5;
  }
  .buy-box{
    padding: 0 .7rem;
    border: 1px solid #707070;
    height: 2rem;
  }
  .buy-box span{
    display: inline-block;
    vertical-align: middle;
    margin-top: .5rem;
  }
  .buy-box .val{
    color:#b01f24;
    font-size: .7rem;
  }
  .buy-box .buy{
    float: right;
    background: #b01f24;
    color: #fff;
    padding: .2rem .5rem;
    margin-top: .4rem;
    border-radius: .3rem;
    box-shadow: 1px 1px 10px #888888;
  }
  .no-box{
    color: #707070;
    text-align: center;
    margin-top: 6rem;
    font-size: .6rem;
  }
  .btn-box{
    margin-top: .7rem;
  }
  .go-btn{
    border: 1px solid #b01f24;
    border-radius: .7rem;
    color: #b01f24;
    padding: .2rem .7rem;
  }


</style>
